<template>
  <div id="User">
    <el-tabs v-model="activeName" @tab-click="handleClick">
     
      <el-header style="text-align: right; font-size: 12px">
        <el-button type="text" @click="logout">退出</el-button>
     </el-header>


      <el-tab-pane label="课程管理" name="first" style="font-size: 16px">
          <br/>
                

          <div id="kcgl1" align = "center">

          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item>
              <h3 class="medium">课程总名额：{{ total_lessons }}</h3>
            </el-carousel-item>
            <el-carousel-item>
              <h3 class="medium">已选名额：{{ lessons_out }}</h3>
            </el-carousel-item>
            <el-carousel-item>
              <h3 class="medium">剩余名额：{{ lessons }}</h3>
            </el-carousel-item>
            <el-carousel-item>
              <h3 class="medium">注册学生数：{{ user_cnt }}</h3>
            </el-carousel-item>
          </el-carousel>  

            <!-- <el-col :span="6">
              <el-card shadow="hover">
                课程总名额：{{ total_lessons }}
              </el-card>
            </el-col>

            <el-col :span="6">
              <el-card shadow="hover">
                已选名额：{{ lessons_out }}
              </el-card>
            </el-col>

            <el-col :span="6">
              <el-card shadow="hover">
                剩余名额：{{lessons }}
              </el-card>
            </el-col>

            <el-col :span="6">
              <el-card shadow="hover">
                注册学生数：{{ user_cnt }}
              </el-card>
            </el-col> -->
          </div>
<br/><br/>
          <div id="kcgl2" align="center">
          <form @submit.prevent="sub">
           <br/> 输入新的总名额：<input type="text" v-model="new_lessons" required="required"/>
            <el-button type="text"  @click="change_lessons">修改</el-button>
          </form>
          </div>
      </el-tab-pane>
      <el-tab-pane label="人员管理" name="second">
        
        <!-- <el-table :data="tableData" height="300" border stripe style="width: 100%" align="center">
          <el-table-column prop="userid" label="日期" width="150"/>
          <el-table-column prop="lesson" label="姓名" width="150"/>
          <el-table-column label="操作" width="250"/>
        </el-table> -->
          
          <el-table :data="tableData" height="300" border stripe style="width: 100%" align="center">
            <el-table-column prop="userid" label="学生" width="150"/>
            <el-table-column prop="lesson" label="是否选上课" width="150"/>
            <el-table-column label="操作" width="250">
              <template slot-scope="scope">
                <el-button @click="get_lesson(scope.row)" type="text" size="small">添加</el-button>
                <el-button @click="return_lesson(scope.row)" type="text" size="small">取消</el-button>
                <el-button @click="delete_user(scope.row)" type="text" size="small">删除用户</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-tab-pane>
      
      <!-- <el-tab-pane label="角色管理" name="third">
            <form @submit.prevent="sub">
              <el-button type="primary" @click="logout">登出</el-button>
            </form>
      </el-tab-pane> -->
    </el-tabs>
      <!-- <img :src="imgUrl"> -->
  </div>

</template>

<script>



export default {
  name: "User",
  data () {
    return {
      imgUrl:require("../assets/pku1.png"),
      activeName: 'first',
      total_lessons: "",
      lessons: "",
      change_lessons_res: "",
      new_lessons: "",
      lessonts_out: "",
      tableData: [],
      user_cnt: ""
    }
  },
  created () {
    let data = new FormData()
    data.append('userid', sessionStorage.getItem("userid"))
    data.append('token', sessionStorage.getItem("token"))
    this.$axios.post("/api/show_lessons/", data).then(response => {
      if(response.data["error"] !== undefined){
        alert("请退出后重新登陆")
      // sessionStorage.setItem("admin", "false")
      // sessionStorage.removeItem("userid")
      // sessionStorage.removeItem("token")
      // this.$router.push("/login")
      }
      this.lessons = response.data["lessons"]
      this.total_lessons = response.data["total_lessons"]
      this.lessons_out = parseInt(this.total_lessons) - parseInt(this.lessons)
    })
    let data2 = new FormData()
    data2.append('userid', sessionStorage.getItem("userid"))
    data2.append('token', sessionStorage.getItem("token"))
    this.$axios.post("/api/show_users/", data2).then(response => {
      if(response.data["error"] !== undefined){
        alert("请退出后重新登陆")
      }
      this.user_cnt = response.data["user_cnt"]
      this.tableData = []
      for (var i = 0; response.data["user_ids"][i] !== undefined; i++){
        this.tableData.push({userid: response.data["user_ids"][i],
          lesson: response.data["lessons"][i]})
      }
    })
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
      },

    return_lesson(row){
      let data = new FormData()
      data.append('userid', sessionStorage.getItem("userid"))
      data.append('return_lesson_userid', row.userid)
      data.append('token', sessionStorage.getItem("token"))
      this.$axios.post("/api/return_lesson/", data).then(response => {
        if(response.data["error"] !== undefined){
          alert("请退出后重新登陆")
        }
        row.lesson = response.data["lesson"]
        if(response.data["lessons"] !== undefined){
          this.lessons = response.data["lessons"]
          this.lessons_out = parseInt(this.total_lessons) - parseInt(this.tlessons)
        }
        alert(response.data["return_lesson"])
      })
    },
    get_lesson(row) {
      let data = new FormData()
      data.append('userid', sessionStorage.getItem("userid"))
      data.append('get_lesson_userid', row.userid)
      data.append('token', sessionStorage.getItem("token"))
      this.$axios.post("/api/get_lesson/", data).then(response => {
        if(response.data["error"] !== undefined){
          alert("请退出后重新登陆")
        }
        if(response.data["lesson"] !== undefined){
          row.lesson = response.data["lesson"]
        }
        if(response.data["lessons"] !== undefined){
          this.lessons = response.data["lessons"]
          this.lessons_out = parseInt(this.total_lessons) - parseInt(this.lessons)
        }
        alert(response.data["get_lesson"])
      })
    },
    delete_user(row) {
      let data = new FormData()
      data.append('userid', sessionStorage.getItem("userid"))
      data.append('delete_userid', row.userid)
      data.append('token', sessionStorage.getItem("token"))
      this.$axios.post("/api/delete_user/", data).then(response => {
        if(response.data["error"] !== undefined){
          alert("请退出后重新登陆")
        }
        location.reload()
        alert(response.data["msg"])
      })
    },
    logout() {
      sessionStorage.setItem("admin", "false")
      sessionStorage.removeItem("userid")
      sessionStorage.removeItem("token")
      this.$router.push("/login")
    },
    change_lessons() {
      if(!this.new_lessons){
        this.change_lessons_res = "(不可为空)"
        return
      }
      let data = new FormData()
      data.append('userid', sessionStorage.getItem("userid"))
      data.append('token', sessionStorage.getItem("token"))
      data.append('new_lessons', this.new_lessons)
      this.$axios.post("/api/change_lessons/", data).then(response => {
        if(response.data["error"] !== undefined){
          alert("请退出后重新登陆")
        }
        this.change_lessons_res = response.data["change_lessons_res"]
        alert(response.data["change_lessons_res"])
        if(response.data["lessons"] !== undefined){
          this.lessons = response.data["lessons"]
          this.total_lessons = response.data["total_lessons"]
          this.lessons_out = parseInt(this.total_lessons) - parseInt(this.tlessons)
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-header {
    background-color: #e9edf3;
    /* color: #333; */
    /* text-align: center; */
    line-height: 10px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
